<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My website app</title>
  <script type="text/javascript" src="script/q-2.1.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    if (typeof q == "undefined") {
      window.onload = function() {
        document.body.innerHTML = "Couldn't load <b>q</b> library. Please make sure it is generated before loading this page by running <em>./generate.py build-min</em> in the current directory." +
        "<p>(You might also want to run this command in the <em>component/standalone/website</em> subdirectory of your qooxdoo SDK or Git repository clone, to avoid this message for further skeletons of type 'website'.)";
      }
    }

    q.ready(function() {
      // render the "greeting" template from below
      var realname = "qooxdoo user";
      q.template.get("greeting", {name: realname}).appendTo(document.body);

      // style the name element
      q("h1 span").setStyles({
        "color": "#3D72C9",
        "cursor": "pointer"
      });

      // make the name editable
      q("h1 span").on("click", function() {
        this.setHtml(prompt("What's your real name?", ""));
      });

      // show a message
      q.create("<p>Have fun coding ...</p>").appendTo(document.body).fadeIn(4000);
    });
  </script>
</head>
<body>
  <script type="template" id="greeting">
    <h1>Hello <span>{{name}}</span>!</h1>
  </script>
</body>
</html>
